<!--
 * @Author: your name
 * @Date: 2021-09-06 18:37:42
 * @LastEditTime: 2021-09-12 10:43:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\info\category.vue
-->
<template>
    <div class="column">
        <div class="btn">
            <el-button type="primary" size="small" @click="toAddHandler">新增</el-button>
            <el-dialog :title="title" :visible.sync="visible" @close="dialogCloseHandler">
                <el-form :model="dialogData" :rules="rules" ref="ruleForm">
                    <el-form-item label="栏目名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="dialogData.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="序号" :label-width="formLabelWidth"  prop="num">
                        <el-input v-model="dialogData.no" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="栏目介绍" :label-width="formLabelWidth"  prop="description">
                        <el-input type="textarea" v-model="dialogData.description" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="dialogSaveHandler">确 定</el-button>
            </div>
            </el-dialog>
        </div>
        <div class="content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" width="50" label="序号" ></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="no" label="排序号"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template v-slot="scope">
                        <el-button type="text" size="small" @click="toEditHandler(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" style="color: red" @click="toRemoveHandler(scope.row.id)">删除</el-button>
                    </template>        
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
import lodash from 'lodash'
export default {
    data() {
        return {
            tableData: [],
            visible: false,
            dialogData: {},
            rules: {
                name: [{ required: true, message: '请输入栏目名称', trigger: 'blur'}]
            },
            title: '',
            formLabelWidth: '120px'
        }
    },
    methods: {
        async categoryFindAll() {
            let res = await request.get('/category/findAll')
            this.tableData = res.data
        },
        toAddHandler() {
            this.dialogData = {};
            this.title="新增栏目信息"
            this.visible = true;
        },
        dialogSaveHandler() {
            request.post('/category/saveOrUpdate',qs.stringify(this.dialogData)).then( res=> {
                this.categoryFindAll();
                this.$message.success(res.message);
                this.visible = false;
            })
        },
        dialogCloseHandler() {
            this.$refs['ruleForm'].resetFields();
        },
        toEditHandler(row) {
            this.dialogData = lodash.clone(row);
            this.title = "编辑栏目信息"
            this.visible = true;
        },
        toRemoveHandler(id) {
            this.$confirm('此操作将永久删除该栏目信息，是否继续?','提示',{
                confirmButtonText: '确定',
                cancelBUttonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/category/deleteById',{params: {id}}).then( res=> {
                this.categoryFindAll();
                this.$message.error(res.message);
              })
            })
        }
    },
    created() {
        this.categoryFindAll()
    },
}
</script>

<style>

</style>